<template>
  <ul class="nav-condition-ul">
    <!--标题-->
    <li class="title"><a href="javascript:void(0)">{{ name }}</a></li>
    <!--不限选项-->
    <li v-if="showNoLimit" :class="{active: selections.length == 0 }" @click="handler(null)">
      <a href="javascript:void(0)">不限</a>
    </li>
    <!--选项列表-->
    <template v-for="item in list" :key="item.id">
      <li :class="{active: selections.includes(item.id) }" @click="handler(item)">
        <a href="javascript:void(0)">{{ item.name }}</a>
      </li>
    </template>
  </ul>
  <!-- 递归组件、自己引用自己 -->
  <ConditionItem v-if="child" :list="child.list" :name="child.name" :key="child.value"
                 v-model="childCondition[child.value]"
                 :multi="child.multi"
                 :show-no-limit="child.showNoLimit"/>
</template>

<script>

export default {
  name: 'ConditionItem',
  props: {
    name: {
      type: String,
      required: true
    },
    modelValue: {  // 选中的元素
      type: [Number, String, Array],
      required: false,
      default: null,
    },
    list: {   // 搜索条件
      type: Array,
      required: true,
    },
    showNoLimit: {  // 是否显示不限
      type: Boolean, required: false, default: true
    },
    multi: {type: Boolean, required: false, default: false} // 是否支持多选
  },
  data() {
    return {
      child: false,
      childCondition: {}, // 子条件
      selections: this.modelValue === null ? [] : (typeof this.modelValue === 'object' || typeof this.modelValue === 'array' ? this.modelValue : [this.modelValue]),
    }
  },
  emits: ["update:model-value", "change-condition", "child-condition-change"],
  methods: {
    handler(item) {
      this.child = false; // 先 默认为 没有孩子节点
      if (item == null) {
        this.$emit("update:model-value");
        this.selections = [];
        this.$emit("change-condition", { [this.name]: [] });
        return;
      }
      let value = item.id;
      this.$nextTick(() => { // 解决组件缓存问题，先设置 this.child 移除组件、再渲染成功后再显示组件、可以禁用缓存效果！
        if (item.child) {
          // 判断 item 下是否有孩子
          this.child = item.child;

          this.childCondition = {
            [item.child.value]: null,
          }; // 子条件设置为空
          this.$emit("change-condition", this.childCondition);
        }
      })
      if (!this.multi || item.child) { // 如果有孩子，则忽略多选
          this.$emit("update:model-value", value);
          this.selections = [value];
      } else {
          let index = this.selections.findIndex(s => s === value);
          if (index != -1) {
            this.selections.splice(index, 1); // 删除
          } else {
            this.selections.push(value); // 添加
          }
          this.$emit("update:model-value", this.selections);
      }
      this.$emit("change-condition", { [this.name]: this.selections });
    },
  },
  watch: {
    childCondition: {
      handler: function (newVal) {
        // 如果 子条件发生改变、发送时间、并冒泡到父组件Condition 中
        this.$emit("change-condition", newVal);
      },
      deep: true
    }
  }

}
</script>

<style scoped>
ul, li {
  list-style: none;
}

.nav-condition-ul {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
  padding: 5px 0;
}

.nav-condition-ul li {
  line-height: 35px;
  padding: 0 15px;
  margin: 0 3px;
}

.nav-condition-ul .title {
  font-size: 16px;
  font-weight: 400;
  font-family: "Microsoft YaHei";
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255);
  margin-right: 8px;
}

.nav-condition-ul a {
  color: #c9c9c9;
}

.nav-condition-ul li.active {
  background-color: #ccc;
  border-radius: 8px;
}
.nav-condition-ul li.active a , .nav-condition-ul li:hover:not(.title) a{
  color: #333 ;
}

.nav-condition-ul li:hover:not(.title) {
  background-color: #e9e9e9;
  border-radius: 8px;
}

</style>